<template>
  <div>
    <el-card shadow="never">
      <header-title title="水费缴费列表"></header-title>
    </el-card>
    <el-card shadow="never">
       <el-row>
        <el-col :offset="4" :span="20">
          <div align="right">
            <el-input v-model="searchForm.searchName" placeholder="商户名称/摊位号/负责人" size="small" style="margin: 0 15px 0 15px;width: 188px;" ></el-input>
            <span class="demonstration">缴费状态：</span>
            <el-select v-model="searchForm.payStatus" @change="changePayStatus" placeholder="请选择" size="small" style="margin: 0 15px 0 15px;width: 120px;">
              <el-option v-for="item in payStatusOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <span class="demonstration">缴费日期：</span>
            <el-date-picker
              v-model="value2"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              :picker-options="pickerOptions">
            </el-date-picker>
            <el-button @click="search" class="button" size="small" round icon="el-icon-search" style="margin: 10px 0;">查询</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="paymentData" v-loading="loading" style="width: 100%">
          <el-table-column prop="payTheFeesTime" label="缴费时间"></el-table-column>
          <el-table-column prop="stallName" label="摊位名称"></el-table-column>
          <el-table-column prop="businessName" label="商户名称"></el-table-column>
          <el-table-column prop="stallName" label="负责人"></el-table-column>
          <el-table-column prop="stallName" label="联系电话"></el-table-column>
          <el-table-column prop="payTypeName" label="缴费项目"></el-table-column>
          <el-table-column prop="money" label="缴费金额(元)"></el-table-column>
          <el-table-column prop="content" label="备注"></el-table-column>
          <!-- <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-tooltip content="点一下就直接删除了噢" placement="top">
                <el-button @click="deletePayment(scope.row)" type="text" style="color:#f7674a;">删除</el-button>
              </el-tooltip>
            </template>
          </el-table-column> -->
          <div slot="empty"><img src="../../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
        </el-table>
        <el-pagination
          :page-size="searchForm.perPage"
          :current-page="searchForm.page"
          :total="searchForm.total"
          @current-change="changePaymentPage"
          style="margin-top: 15px;"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import MySelect from "@/components/MySelect"
export default {
  name: 'PaymentList',
  components: {
     HeaderTitle,
     MySelect
  },
  data(){
    return {
      searchForm: {
        businessId: 0,
        searchName: '',
        payStatus: -1,
        payType: -1,
        perPage: 10, // 每页显示10条
        page: 1, // 当前页
        total: 0,
      },
      loading: true,
      paymentData: [],
      paymentDialog: false,
      modal: {},
      payStatusOptions:[],
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      this.getPaymentList(this.searchForm)
    }
  },
  mounted(){
    this.initSelect()
    this.getPaymentList(this.searchForm)
  },
  methods:{
    // 是否已缴费
    changePayStatus(val){
      this.searchForm.payStatus = val
    },
    // 缴费类型
    changePayType(val){
      this.searchForm.payType = val
    },

    initSelect(){
      this.$store.dispatch("payment/fetchPayStatus").then(responseData => {
          this.payStatusOptions = responseData.data
          this.payStatusOptions.unshift({id:-1, name:'全部'}) 
        }).catch(err => {
          console.log(err)
        })
    },

    // 获取缴费信息列表
    getPaymentList(searchForm){
      this.$store.dispatch('payment/fetchPaymentData',searchForm).then(
        data => {
          this.loading = false
          for(let i = 0; i < data.items.length; i++){
            data.items[i].money = data.items[i].money / 100
          }
          this.paymentData = data.items
          this.searchForm.total = data.total
        }
      ).catch(err => {
        this.loading = false
        this.paymentData = []
        this.searchForm.total = 0
      })
    },
    search(){
      this.searchForm.page = 1
      this.getPaymentList(this.searchForm)
    },
    changePaymentPage(num){
      this.searchForm.page = num
      this.getPaymentList(this.searchForm)
    },
    // 点击新增缴费信息
    add(){
      this.paymentDialog = true
    },
    mySelectedMessage(obj){
      this.modal = Object.assign({businessPayTheFeesMessageDetailId: obj.value,content: obj.label},this.modal)
    },
    mySelectedBusiness(obj){
      this.modal = Object.assign({businessId: obj.value,businessName: obj.label},this.modal)
    },
    mySelectedAccountName(obj){
      this.modal = Object.assign({marketAccountId: obj.value,marketAccountName: obj.label},this.modal)
    },
    addChangePayStatus(val){
      this.modal = Object.assign({payStatus: val},this.modal)
    },
    addChangePayType(val){
      this.modal = Object.assign({payType: val},this.modal)
    },
    // 提交新增缴费信息
    submit(){
      this.paymentDialog = false
      this.$store.dispatch('payment/fetchSubmitPaymentInfo', this.modal).then(
        data => {
          if(data){
            this.$message({
              type: 'success',
              message: '添加成功,请刷新!'
            })
          }
          this.close()
          this.getPaymentList(this.searchForm)
        }
      ).catch(err => {
        this.$message({
          type: 'error',
          message: '添加失败，请刷新!'
        })
      })
    },
    close(){
      // 清空
      this.modal = {}
    },
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
  .button {
    background: #64d9d6;
    color: #fff;
    margin-left: 40px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 33.3%;
  }
  .demonstration {
    display: inline-block;
    color: #8492a6;
    font-size: 14px;
}
</style>
